<template>
	<view>

	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss">

</style>
<template>
	<view>
		<view class="container">


			<!-- <view class="box-imgae"> -->
			<image src="/static/img/open/bjt.png" mode="" class="banner_image"></image>
			<!-- </view> -->
			<view class="dynamic">
				<view class="dynamic_top">
					<image src="/static/img/my/12.png" mode=""></image>
					<view class="banner_container_bottom">
						<view class="banner_container_bottom_option">
							<text>195条动态</text>
							<view class="banner_container_bottom_s">

							</view>
							<text>32人关注</text>
						</view>
						<view class="banner_container_bottom_right">
							关注
						</view>
					</view>
				</view>
				<view class="banner_container">
					<view class="banner_container_topic">
						open AI
						<text>A000001</text>
					</view>
					<view class="dynamic_Introducer-jianjie">
						简介
					</view>
					<view style="width: 327px;-webkit-line-clamp: 1" class="dynamic_Introducer-content">
						open AI AIGC api应用 新闻动态更新
					</view>
				</view>
			</view>
			<view class="circle-user">
				<view class="circle-user-title">
					圈里有谁
				</view>
				<scroll-view class="user-list" scrollX enableFlex="enable-flex" enhanced="enhanced"
					scrollWithAnimation="scroll-with-animation">
					<view class="user-box" v-for="(val,index) in list">
						<image :src="val.image" mode=""></image>
						<view class="qz">
							{{val.name}}
						</view>
					</view>

				</scroll-view>
			</view>
			<l-sticky :scrollTop="scrollTop" mode="css">
				<l-sticky-item :top="customBar" l-header-sticky-class="header-sticky-class">
					<view slot="header" class="nav">
						<view class="tag-box" v-for="(val,i) in tabList" @click="ontabtap(i)">
							<view class="taga-item" :class="flag===i?'active':''">
								{{val.name}}
							</view>
						</view>
					</view>
					<view slot="body" class="body-box" v-show="flag == 0">
						<view class="pd-btm">
							<view slot="content">
								<view class="topic-detail-view" v-for="(val,i) in list_fing">
									<view class="topic-panel">
										<view class="user-info-view">
											<navigator class="user-avatar-view" hover-class="none"
												:url="'/pages/user/user?id=' + item.user.id">
												<image class="user-avatar-image" compression="avatar" mode="aspectFill"
													:src="val.img"></image>
												<view class="user-view">
													<view class="user-name">
														<text class="user-nick-text">{{val.name}}</text>
													</view>
												</view>
											</navigator>
											<view class="user-rigth">
												<view class="follow-view">
													关注
												</view>
												<image src="/static/img/open/tu2.png" mode="" class="follow-image">
												</image>
											</view>
										</view>
										<view class="content-view">
											<text>{{val.content}}</text>
										</view>
										<view class="img-lists">
											<image :src="val.Image" mode="" class="image-box"></image>
											<image :src="val.Image" mode="" class="image-box"></image>
											<image :src="val.Image" mode="" class="image-box"></image>
										</view>
										<view class="format-time-view">
											1天前
										</view>
										<scroll-view scrollX enableFlex="enable-flex" enhanced="enhanced"
											scrollWithAnimation="scroll-with-animation" :showScrollbar="false"
											class="address-tag-all-view">
											<view class="tag-view">
												<image src="/static/img/open/tu5.png" mode="" class="view-image">
												</image>
												<view class="view-text">
													AI
												</view>
											</view>
											<view class="tag-view">
												<image src="/static/img/open/tu5.png" mode="" class="view-image">
												</image>
												<view class="view-text">
													web3
												</view>
											</view>
											<view class="tag-view">
												<image src="/static/img/open/tu5.png" mode="" class="view-image">
												</image>
												<view class="view-text">
													openAI
												</view>
											</view>
										</scroll-view>
										<view class="card__footer">
											<!-- <view class="share">
												<image src="" mode=""></image>
											</view> -->
											<view class="upvoteAndreply">
												<view class="upvote">
													<image src="/static/img/open/tu6.png" mode=""></image>
													<text>1</text>
												</view>
												<view class="reply">
													<image src="/static/img/open/tu8.png" mode=""></image>
													<text>1</text>
												</view>
												<view class="reply">
													<image src="/static/img/open/tu7.png" mode=""></image>
													<text>10</text>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view slot="body" class="body-box2" v-show="flag == 1">
						<view class="body-box2-hd">
							<view class="body-box2-hd-nr">
								下午 12:15
							</view>

						</view>
						<view class="body-box2-center">
							<view class="body-box2-center-nr" v-for="(val,i) in record">
								<image :src="val.img" mode="" class="body-box2-center-img"></image>
								<view class="body-box2-center-wz">
									{{val.conter}}
								</view>
							</view>
						</view>
						<view class="body-box2-bd">
							<view class="body-box2-bd-nr" @click="btnFlage = true" v-if="btnFlage == true">
								加入会和
							</view>
							<view class="body-box2-bd-nr2" v-else>
								<view class="body-box2-bd-nr-left">
									<image src="/static/img/open/tu12.png" mode=""></image>
								</view>
								<view class="body-box2-bd-nr-center">
									<input type="text" placeholder="输入文字" placeholder-class="#999">
									<image src="/static/img/open/tu13.png" mode="" class="body-box2-bd-nr-center-img">
									</image>
								</view>
								<view class="body-box2-bd-nr-right">
									<image src="/static/img/open/tu14.png" mode="" class="body-box2-bd-nr-right-img">
									</image>
								</view>
							</view>
						</view>
					</view>
				</l-sticky-item>
			</l-sticky>
		</view>
		<view class="add-topic-post" v-show="flag == 0">
			<view class="add-post-ctrl add-post-animation">
				<view class="image">
					<image src="/static/img/open/tu9.png" mode="" class="images"></image>
				</view>
			</view>

		</view>
		<!-- <view class="add-topic-post-btn">
			<view class="add-topic-post-option add-option-animation2">
				<view class="add-post-icon-box add-option-animation-drift2">

				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {

				list: [{
						image: '/static/img/open/tu1.png',
						name: '圈主'
					},
					{
						image: '/static/img/open/tu1.png',
						name: '圈主'
					},
					{
						image: '/static/img/open/tu1.png',
						name: '圈主'
					},
					{
						image: '/static/img/open/tu1.png',
						name: '圈主'
					}, {
						image: '/static/img/open/tu1.png',
						name: '圈主'
					}, {
						image: '/static/img/open/tu1.png',
						name: '圈主'
					}, {
						image: '/static/img/open/tu1.png',
						name: '圈主'
					},
					{
						image: '/static/img/open/tu1.png',
						name: '圈主'
					},
					{
						image: '/static/img/open/tu1.png',
						name: '圈主'
					},
				],
				list_fing: [{
					img: '/static/img/open/tu1.png',
					name: 'dribbble',
					content: 'ChatGPT-4应用',
					Image: '/static/img/open/tu4.png',

				}, {
					img: '/static/img/open/tu1.png',
					name: 'dribbble',
					content: 'ChatGPT-4应用',
					Image: '/static/img/open/tu4.png',

				}, {
					img: '/static/img/open/tu1.png',
					name: 'dribbble',
					content: 'ChatGPT-4应用',
					Image: '/static/img/open/tu4.png',

				}, {
					img: '/static/img/open/tu1.png',
					name: 'dribbble',
					content: 'ChatGPT-4应用',
					Image: '/static/img/open/tu4.png',

				}, ],
				tabList: [{
					name: '最新'
				}, {
					name: '聊天室'
				}, ],
				scrollTop: 0,
				customBar: '',
				flag: 1, //tab选项
				record: [{
					img: '/static/img/open/tu10.png',
					conter: 'GPT更新了',
				}, {
					img: '/static/img/open/tu11.png',
					conter: '去看看',
				}, {
					img: '/static/img/open/tu11.png',
					conter: 'ChatGPT已经停止6个月开发,迭代速度过快,无法控制了',
				}],
				btnFlage: false,
			};
		},
		methods: {
			ontabtap(e) {
				console.log(e);
				this.flag = e
			}
		}
	}
</script>

<style lang="less">
	.container {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		display: flex;
		flex-direction: column;
		background: #fff;
	}

	.add-topic-post {
		position: fixed;
		bottom: 60rpx;
		text-align: center;
		z-index: 99;
		width: 100%;

		.add-post-animation {
			width: 80rpx;
			animation-duration: 0.5s;
			animation-name: add-post-animation;
			animation-iteration-count: 1;
			animation-direction: alternate;
		}

		.add-post-ctrl {
			width: 260rpx;
			line-height: 80rpx;
			height: 80rpx;
			color: #444;
			border-radius: 80rpx;
			margin: 0 auto;
			vertical-align: middle;

			.image {
				height: 80rpx;
				width: 80rpx;
				margin: 0 auto;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 80rpx;
				background: #333333;

				.images {
					height: 32rpx;
					width: 32rpx;
				}
			}
		}
	}

	.add-topic-post-btn {
		position: fixed;
		bottom: 60rpx;
		text-align: center;
		z-index: 98;
		width: 100%;

		.add-option-animation2 {
			animation-duration: 0.5s;
			animation-name: add-option-animation2;
			animation-iteration-count: 1;
			animation-timing-function: ease-out;
			animation-direction: alternate;
		}

		.add-topic-post-option {
			height: 80rpx;
			color: #444;
			text-align: center;
			background: #FFF;
			border-radius: 80rpx;
			margin: 0 auto;
			overflow: hidden;
			width: 260rpx;
			box-shadow: 3rpx 3rpx 30rpx rgba(99, 99, 99, 0.3);
		}

		.add-option-animation-drift2 {
			opacity: 1;
			animation-duration: 0.5s;
			animation-name: add-option-animation-drift2;
			animation-iteration-count: 1;
			animation-timing-function: ease-out;
			animation-direction: alternate;
		}

		.add-post-icon-box {
			width: 250rpx;
			display: flex;
			align-items: center;
			padding: 0 5rpx;
		}
	}

	.banner_image {
		width: 100%;
		height: 330rpx;
		animation: fadeIn 0.5s ease;
	}

	.dynamic {
		width: 100%;
		display: flex;
		flex-direction: column;
		background: #fff;
		border-radius: 30rpx 30rpx 0 0;
		margin-top: -20rpx;
		position: relative;
		z-index: 99;

		.dynamic_top {
			width: 690rpx;
			height: 140rpx;
			margin: -70rpx auto 0;
			display: flex;
			align-items: flex-end;
			justify-content: space-between;

			image {
				width: 140rpx;
				height: 140rpx;
				border-radius: 500rpx;
				border: 2px solid #fff;
				background: #f5f5f5;
				animation: fadeIn 1s ease;
			}

			.banner_container_bottom {
				width: 520rpx;
				height: 54rpx;
				display: flex;
				justify-content: space-between;
				flex-direction: row;

				.banner_container_bottom_option {
					color: #333;
					display: flex;
					align-items: center;
					font-size: 24rpx;
					font-weight: 400;

					.banner_container_bottom_s {
						width: 1px;
						height: 18rpx;
						background: #333;
						margin: 0 20rpx;
					}
				}

				.banner_container_bottom_right {
					display: flex;
					align-items: center;
					justify-content: center;
					background: #333333;
					color: #fff;
					width: 134rpx;
					height: 54rpx;
					font-size: 24rpx;
					border-radius: 8rpx;
				}
			}
		}

		.banner_container {
			width: 690rpx;
			display: flex;
			justify-content: flex-start;
			flex-direction: column;
			padding: 30rpx 0;
			margin: 0 auto;
			border-bottom: 1px solid #f5f5f5;

			.banner_container_topic {
				width: 690rpx;
				height: 50rpx;
				font-size: 30rpx;
				font-weight: 900;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
				color: #000;

				text {
					color: #A14BFF;
					font-size: 25rpx;
					margin-left: 50rpx;
				}
			}

			.dynamic_Introducer-jianjie {
				position: absolute;
				margin-top: 65rpx;
				width: 64rpx;
				height: 32rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1px solid #f5f5f5;
				font-size: 20rpx;
				color: #333;
				border-radius: 8rpx;
			}

			.dynamic_Introducer-content {
				color: #333;
				line-height: 38rpx;
				font-size: 26rpx;
				text-indent: 80rpx;
				padding-top: 15rpx;
				display: -webkit-box;
				overflow: hidden;
				text-overflow: ellipsis;
				word-wrap: break-word;
				white-space: normal !important;
				-webkit-box-orient: vertical;
				animation: fadeIn 1s ease;
			}
		}
	}

	.circle-user {
		display: flex;
		flex-direction: column;
		padding-top: 20rpx;
		border-bottom: 1px solid #f5f5f5;

		.circle-user-title {
			color: #333333;
			font-size: 28rpx;
			font-weight: bold;
			padding-bottom: 20rpx;
			margin-left: 30rpx;
		}

		.user-list {
			display: flex;
			height: 160rpx;

			.user-box {
				display: flex;
				flex-direction: column;
				margin-left: 40rpx;
				width: 88rpx;
				height: 135rpx;
				position: relative;

				image {
					width: 88rpx;
					height: 88rpx;
					border-radius: 88rpx;
					background: #f5f5f5;
					animation: fadeIn 1s ease;
				}

				.qz {
					position: absolute;
					bottom: 0;
					left: 18rpx;
					width: 54rpx;
					height: 32rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 18rpx;
					font-weight: bold;
					color: #fff;
					background: #333;
					border-radius: 8rpx;
				}
			}
		}
	}

	.nav {
		width: 100%;
		height: 90rpx;
		display: flex;
		font-size: 32rpx;
		line-height: 90rpx;
		background: #FFF;

		.header-sticky-class {
			box-sizing: border-box !important;
			z-index: 99 !important;
		}

		.tag-box {
			padding: 0 30rpx;

			.taga-item {
				font-size: 32rpx;
				color: #949494;
				font-weight: 450;
			}

			.active {
				color: #333333 !important;
				font-weight: bold !important;
				position: relative;

				&:after {
					content: '';
					display: block;
					width: 16rpx;
					height: 6rpx;
					background: #333333;
					border-radius: 6rpx;
					position: absolute;
					bottom: 10rpx;
					left: 50%;
					transform: translateX(-50%);
					transition: all 0.4s ease;
				}
			}
		}
	}

	.body-box {
		margin-top: 10rpx;
		margin-bottom: 50rpx;

		.pd-btm {
			padding-bottom: 200rpx;

			.topic-detail-view {
				display: flex;
				flex-direction: column;
				padding: 10rpx 30rpx 0rpx 30rpx;
				background-color: #fff;
				border-bottom: 1px solid #f5f5f5;

				.topic-panel {
					position: relative;
					width: 690rpx;
					border-radius: 10rpx;
					box-sizing: border-box;
					color: #333;
					font-size: 28rpx;
					margin-bottom: 20rpx;
					padding-bottom: 20rpx;

					.user-info-view {
						width: 100%;
						height: 100rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.user-avatar-view {
							display: flex;
							align-items: center;

							.user-avatar-image {
								height: 68rpx;
								width: 68rpx;
								overflow: hidden;
								border-radius: 50%;
								margin-right: 22rpx;
							}
						}

						.user-view {
							display: flex;
							flex-direction: column;

							.user-name {
								display: flex;
								align-items: center;
								justify-content: flex-start;

								.user-nick-text {
									max-width: 315rpx;
									height: 40rpx;
									font-size: 28rpx;
									font-weight: bold;
									color: #333;
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
								}
							}
						}

						.user-rigth {
							display: flex;
							align-items: center;

							.follow-view {
								width: 110rpx;
								height: 46rpx;
								border-radius: 500rpx;
								font-size: 26rpx;
								font-weight: 500;
								color: #949494;
								background-color: #fff;
								border: 1px solid #f5f5f5;
								display: flex;
								align-items: center;
								justify-content: center;
							}

							.follow-image {
								margin-left: 20rpx;
								width: 27rpx;
								height: 5rpx;
							}
						}
					}

					.content-view {
						margin-top: 6rpx;
						font-size: 28rpx;
						width: 690rpx;
						line-height: 50rpx;
						font-weight: 450;
						color: #333;
						display: block;
						overflow: hidden;
					}

					.img-lists {
						margin-top: 20rpx;
						display: flex;
						flex-wrap: wrap;

						.image-box {
							width: 222rpx;
							height: 222rpx;
							margin-right: 8rpx;
							margin-bottom: 8rpx;
						}
					}

					.format-time-view {
						padding: 20rpx 0;
						color: #949494;
						font-size: 24rpx;
						font-weight: 400;
					}

					.address-tag-all-view {
						display: flex;
						height: 60rpx;
						margin-top: 20rpx;

						.tag-view {
							margin-right: 14rpx;
							padding: 10rpx 20rpx 10rpx 10rpx;
							height: 36rpx;
							display: flex;
							align-items: center;
							border-radius: 500rpx;
							border: 1px solid #f5f5f5;


						}

						.view-image {
							width: 38rpx;
							height: 38rpx;
						}

						.view-text {
							font-size: 24rpx;
							line-height: 36rpx;
							color: #949494;
							font-weight: 400;
							margin-left: 6rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}

					.card__footer {
						padding: 30rpx 0 20rpx;
						display: flex;
						align-items: center;
						justify-content: flex-end;

						.upvoteAndreply {
							display: flex;
							align-items: center;

							image {
								width: 48rpx;
								height: 48rpx;
								margin-right: 18rpx;
							}

							.reply {
								margin-left: 60rpx;
								display: flex;
								align-items: center;
							}

							.upvote {
								display: flex;
								align-items: center;
							}
						}
					}
				}
			}
		}
	}

	.body-box2 {
		background-color: #ECEBF5;
		padding: 16rpx 0;
		box-sizing: border-box;
		border-radius: 22rpx 22rpx 22rpx 22rpx;

		.body-box2-hd {
			color: #CBCBCB;
			margin: 0 218rpx;
			margin-bottom: 18rpx;

			.body-box2-hd-nr {
				background-color: #E0DFE8;
				border-radius: 15rpx;
				padding: 8rpx;
				box-sizing: border-box;
				text-align: center;

			}
		}

		.body-box2-center {
			padding: 20rpx 42rpx;

			.body-box2-center-nr {
				display: flex;
				align-items: center;
				// flex-wrap: wrap;
				margin-bottom: 50rpx;

				// justify-content: space-between;
				.body-box2-center-img {
					width: 100rpx;
					height: 100rpx;
					margin-right: 28rpx;
				}

				.body-box2-center-wz {
					font-size: 30rpx;
					background-color: #fff;
					padding: 14rpx 44rpx;
					// text-align: center;
					box-sizing: border-box;
					border-radius: 20rpx 72rpx 72rpx 72rpx;
					font-size: 24rpx;
					letter-spacing: 5rpx;
					color: #606060;
					max-width: 500rpx;
					word-break: break-all;
				}
			}
		}

		.body-box2-bd {
			background-color: #DDDAF0;
			padding: 20rpx 0 82rpx 0;

			.body-box2-bd-nr {
				margin: 0 30rpx;
				text-align: center;
				line-height: 70rpx;
				background-color: #9F5BFA;
				border-radius: 34rpx;
				color: #fff;
				font-size: 22rpx;
			}

			.body-box2-bd-nr2 {
				display: flex;
				align-items: center;
				justify-content: space-around;

				// justify-content: space-evenly;
				.body-box2-bd-nr-left {
					width: 40rpx;
					height: 40rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.body-box2-bd-nr-center {
					background-color: #fff;
					display: flex;
					align-items: center;
					border-radius: 34rpx;
					width: 576rpx;
					height: 75rpx;
					// padding-left: 25rpx;
					justify-content: space-around;

					.body-box2-bd-nr-center-img {
						width: 40rpx;
						height: 40rpx;
					}
				}

				.body-box2-bd-nr-right {
					width: 80rpx;
					height: 80rpx;
					background-color: #9E61F6;
					text-align: center;
					line-height: 93rpx;
					border-radius: 50rpx;

					.body-box2-bd-nr-right-img {
						width: 24rpx;
						height: 40rpx;
					}
				}
			}
		}
	}
</style>